<template>
  <div class="component header-component row between-span">
    <div>Z-DOC</div>
    <Dropdown trigger="click" @on-click="menuHandle">
      <a>
        {{user.username}}
        <Icon type="arrow-down-b"></Icon>
      </a>
      <Dropdown-menu slot="list">
        <Dropdown-item name="exit">退出</Dropdown-item>
      </Dropdown-menu>
    </Dropdown>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'work-header',
    data () {
      return {}
    },
    computed: {
      ...mapState({
        user: state => state.user
      })
    },
    methods: {
      menuHandle (action) {
        switch (action) {
          case 'exit':
            {
              console.log('exit')
              break
            }
          default:
            break
        }
      }
    },
    mounted () {}
  }
</script>
<style lang="less" scoped>
  .header-component {
    padding: 20px 40px;
  }

</style>
